<template>
	<view :style="$theme.pageStyle">
		<view class="search">
			<u-search :show-action="true" v-model="keyword" shape="square" actionText="搜索" height="45" :animation="true"
				@custom="custom"></u-search>
		</view>
		<view class="navs">
			<view class="types">
				<block v-for="(item,index) in Cate" :key="index">
					<view class="tyIm" @click="ToCate(item)">
						<image :src="item.img" mode=""></image>
						<text>{{item.title}}</text>
					</view>
				</block>
			</view>
		</view>
		<view class="lawyer_list">
			<block v-for="(item , index ) in DataList" :key="index">
				<view class="law_list recommend-conent" @click="Tourl('/pages/lawyer/info?id=' + item.id)">
					<view class="lawyer-list">
						<view class="lawyer home">
							<view class="lawyer-left">
								<view class="lawyer-left-info">
									<view class="lawyer-left-info-img">
										<image :src="item.avatar" mode=""></image>
									</view>
									<!-- <view class="lawyer-tag">
										<view class="lawyer-tag-val">
											金牌
										</view>
									</view> -->
								</view>
								<view class="inline-status" v-if="item.is_online == 1">
									<statusPoint type="success"></statusPoint>
									在线
								</view>
							</view>
							<view class="lawyer-right">
								<view class="lawyer-right-name">
									<view class="lawyer-right-name-left">
										{{item.real_name}}
									</view>
									<view class="lawyer-right-name-right l-color-theme"
										v-if="item.lawyer_auth_status == 2">
										官方认证
									</view>
								</view>
								<view class="lawyer-right-time">
									<view class="lawyer-right-time-left">
										执业{{item.year}}年
									</view>

									<view class="lawyer-right-time-left">
										服务{{item.fuwu}}人
									</view>

									<view class="lawyer-right-time-right">
										{{item.lawoffice}}
									</view>
									
									<view class="lawyer-right-time-right">
										{{item.like}}
									</view>
									
								</view>

								<view class="lawyer-right-btn-position">
									<view class="lawyer-right-btn-right">
										<view class="lawyer-right-btn-right-info">
											在线咨询
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<login :loginPopupShow='loginPop' @close="closeLoginPopup" />
		<view style="height: 40px;"></view>
	</view>
</template>

<script>
	import statusPoint from '@/components/status.vue'
	import $H from '@/common/js/request.js';
	export default {
		components: {
			statusPoint
		},
		data() {
			return {
				loginPop: false,
				isLogin: '',
				keyword: "",
				scrollTop: 0,
				indexData: 0,
				isbanner: ['https://jiudefalv.oss-cn-beijing.aliyuncs.com/1adcebff04ddf896/21e4e8250241ceb2.png'],
				navs: [],
				cate: [],
				lawyer: [],
				office: [],
				DataList: [],
				Cate: [],
				limit: 15,
				list1: [{
					name: '找律师',
				}, {
					name: '找律所',
				}]
			}
		},
		onLoad(opt) {
			this.timeer()
			if (uni.getStorageSync('token') == '') {
				this.isLogin = 0
			} else {
				this.isLogin = 1
			}
			this.getCate();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			this.GetData();
		},
		methods: {
			closeLoginPopup(){
				this.loginPop = false
			},
			async getCate() {
				try {
					const res = await $H.post('lawyer/cate', {}, {
						token: false
					});
					this.Cate = res.data
				} catch (error) {

				} finally {

				}
			},
			timeer() {
				this.DataList = [];
				this.isLoading = false;
				this.scroll = false;
				this.status = 0;
				this.pages = 1;
				this.page = 0;
				this.out = 0;
				this.GetData();
			},
			GetData(e) {
				if (this.isLoading) {
					return;
				}
				if (this.page < this.pages) {
					this.out = 0;
					this.isLoading = true;
					this.scroll = false;
					this.status = 1;
					this.limit = 15;
					var page = this.page + 1;
					$H.post('index/search', {
						'page': page,
						'limit': this.limit,
						'keyword': this.keyword
					}, {
						token: true
					}).then(res => {
						if (res.code == 1) {
							var list = res.data.data;
							for (let i = 0; i < list.length; i++) {
								//将数据逐条写入数组
								this.DataList.push(list[i]);
							}
							this.pages = res.data.last_page;
							this.page = page;
							this.scroll = true;
							this.isLoading = false;
							setTimeout(() => {
								this.ShowLoading = false
							}, 1000);

							this.out = 1;
							if (this.page == this.pages || res.data.total == 0) {
								this.status = 2;
							} else {
								this.status = 0;
							}
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					})
				}
			},
			Tourl(url) {
				uni.navigateTo({
					url: url
				})
			},
			custom(value) {
				this.keyword = value
				this.timeer()
			},
			ToCate(item){
				uni.setStorageSync('S_title_Cate',item.title)
				uni.navigateTo({
					url: '/pages/index/cate?id=' + item.id
				})
			}
		}
	}
</script>

<style>
	page {
		/* background: #fff; */
	}
</style>
<style lang="scss" scoped>
	@import '@/common/css/lawyer.scss';

	.search {
		margin: 10px;
	}

	.navs {
		margin: 10px;

		.types {
			background: #fff;
			border-radius: 13px;
			margin-top: 13px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			width: 100%;

			.tyIm {
				display: flex;
				flex-direction: column;
				width: 25%;
				height: 88px;
				justify-content: center;
				align-items: center;
				border-right: 1px solid #f2f3f4;
				border-bottom: 1px solid #f2f3f4;
			}

			.tyIm image {
				width: 35px;
				height: 35px;
			}

			.tyIm text {
				font-size: 13px;
			}
		}
	}
</style>